import QtQuick 1.0
//import ShellInvoker 1.0
import "../../../common/lib/kdeadmouseutils-build-desktop"

Item {
    id: homeItem
    property string userName : "emugwaneza"
    property string appHome : "/socMDC/KdeadMouse/apps/youtube"
    signal select(string id)
    
    width: 500
    height: 600
    anchors.centerIn: parent
    ListModel {
	  id : plModel
	  /*ListElement {
	      title: "title2"
	      pId : "5553264"
	  }
	  ListElement {
	      title: "John Brown"
	      pId : "555 8426"
	  }
	  ListElement {
	      title: "Sam Wise"
	      pId : "555 0473"
	  }*/
    }
    ShellInvoker {
	property string typeData : 'empty'
	id:serverTube
	waitFor:'start'
	onOutputLineChanged : {
	    if('empty' == serverTube.typeData){
	      typeData='Pl';
	      return;
	    }
	    //console.log("out##"  + serverTube.outputLine);
	    //{"title":"melange", "pId":"37C3E7FA3BFBE74C"}
	    var sl = "("+ serverTube.outputLine +")" ;//;"(\{\"title\":\"AliciaKeys&jeanne Cherhal\", \"pId\":\"C7956DDE99F32C16\"\})";
	    var l = eval(sl);
	    plModel.append(l);
	}
	onLaunched : {
	    var cmd = 'up,' + homeItem.userName;
	    console.log("sendCmnd :"+ cmd);
	    serverTube.write(cmd);
	    console.log("send");
	}
    }
    
    Rectangle {
	  id:rectHome
	  color: "#3E606F"
	  anchors.fill: parent
	  anchors.centerIn: parent
	  ListView {
		  id: lvPlaylist
		  width: parent.width - 40
		  height: parent.height - 40
		  anchors.centerIn: parent
		  focus: true
		  model:plModel
		  orientation : ListView.Vertical
		  spacing : 25
		  
		  delegate: Rectangle {
				  id:rectItem
				  color: "#91AA9D"
				  smooth: true
				  //clip:false
				  radius: 10
				  anchors.horizontalCenter:parent.horizontalCenter
				  width: ListView.view.width - 100
				  height: 60
				  Text {
				      anchors.centerIn: rectItem
				      text: title
				      color: "#193441"
				      font.pixelSize: 30
				    }
				   states: State {
					name: "active"; when: rectItem.activeFocus
					PropertyChanges { target: rectItem;scale: 1.3 }
					//PropertyChanges { target: label; font.pixelSize: 16 }
				    }

				    transitions: Transition {
					NumberAnimation { properties: "scale"; duration: 100 }
				    }
				    
				    Keys.onReturnPressed : {
					homeItem.select(pId);
					event.accepted = true;
				      }
				    
				}
		  
		  
		  //spacing:20
		  /*Behavior on y {
		      NumberAnimation { duration: 600; easing.type: Easing.OutQuint }
		  }*/
		  
		  /*Keys.onPressed: {
		      if (event.key == Qt.Key_Return) {
			  console.log("selected ############:"  + currentIndex );
			  event.accepted = true;
		      }
		  }*/
	      }
    }
    
    Component.onCompleted: {
      //shell,[arg1]
      serverTube.shellAction('/usr/bin/perl',['-I',homeItem.appHome +'/bin/PerlTube/WebService-GData/lib',homeItem.appHome +'/bin/PerlTube/perlTubeAPI.pl']);
    }
	/*states: 
		State {
			  name: "avancer";
			  PropertyChanges { target: list1; x:1000  }
		      }
	    
	    transitions: Transition {
		NumberAnimation { properties: "x,y"; duration: 2000 }
	    }*/
        
   
        
}
